{% extends 'moblie_base.html' %}

{% block title %}
Brenden Jeon
{% endblock %}
{% block stylesheet %}
{{ block.super }}
{% endblock%}

{% block javascript %}
{{ block.super }}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
$(document).ready(function () {
    var lat = 0;
    var lng = 0;
    function success(position) {
        lat = position.coords.latitude;
        lng = position.coords.longitude;
        var latlng = new google.maps.LatLng(lat, lng);

        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeControl: false,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title:"You are here!"
        });
    }

    function error(msg) {
        if(msg != ""){
            alert(msg);
        } else {
            alert("Something wrong");
        }
    }

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        $("map_error").html('Not supported');
    }

    $("#submit").click(function(position){
        //var comment = encodeURIComponent($("textarea").val());
        var comment = $("textarea").val();
        var targetUrl = "{% url add_location %}";
        $.post(targetUrl,
            {latitude: lat,
            longitude: lng,
            comment: comment},
            function(data) {
                alert("Data Loaded");
                $("textarea").val("");
            }
        );

    });
});
</script>
{% endblock%}

{% block content %}
<div id="content">
    <div id="map_error"></div>
    <div id="map_canvas" style="width: 250px; height: 200px"></div>
    <textarea cols="30" rows="3" name="comment"></textarea><br />
    <button id="submit">submit</button>
</div>
{% endblock %}
